<!-- better-scroll 滚动分页组件 -->

<template>
  <div ref="wrapper" class="my-scroll">
    <div>
      <slot>

      </slot>
      <div class="bottom-tip" ref="bottom-tip" v-show="!loading" @click="loadingMore">
        <span>{{bottomTipMsg}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from "better-scroll";

  export default {
    components: {},
    props: {
      // 传入的数据
      totalPage: {
        type: Number,
        default: null
      },
      currentPage: {
        type: Number,
        default: null
      },
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: true
      },
      // 是否监听滚动位置
      listenScroll: {
        type: Boolean,
        default: false
      },
      // 是否开启上拉刷新
      pullUpLoad: {
        type: Number,
        default: -50
      },
      // 延迟刷新
      refreshDelay: {
        type: Number,
        default: 20
      },
      //正在加载
      loading: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      bottomTipMsg() {
        if (this.totalPage == 0) {
          return ''
        }
        if (this.totalPage > this.currentPage) {
          return '查看更多'
        }
        if (this.totalPage <= this.currentPage) {
          return '没有更多了'
        }

      }
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wrapper) {
          return;
        }
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click,
          pullUpLoad: {threshold: this.pullUpLoad}
        });
        // 派发上拉刷新事件
        if (this.pullUpLoad) {
          let me = this;
          me.scroll.on("pullingUp", function () {
            if (me.currentPage < me.totalPage) {
              me.$emit("refreshList", me.currentPage + 1);
            }
          });
        }
      },
      loadingMore() {
        if (this.currentPage < this.totalPage) {
          this.$emit("refreshList", this.currentPage + 1);
        }
      },
      refresh() {
        this.scroll && this.scroll.refresh();
      },
      finishPullUp() {
        this.scroll && this.scroll.finishPullUp();
      }
    },
    mounted() {
      setTimeout(() => {
        this._initScroll();
      }, 20);
    }
  };
</script>

<style lang="stylus" scoped>
  .my-scroll
    height: 100%

  .bottom-tip
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #777;

</style>

